<template>
    <div>
        <XPTable ref='tableRef' :api='pageApi' :columns='columns'>
            <template #toolBar>
                <Edit @finish='finishEdit' title='新建任务'>
                    <a-button type='primary'>新建任务</a-button>
                </Edit>
                <a-button type='primary'>上报抄表</a-button>
            </template>
            <template #action='{record}'>
                <a-space :size='5'>
                    <router-link to='/meterFolderManagement/meterFolder/move'>查看用户</router-link>
                </a-space>
            </template>
        </XPTable>
    </div>
</template>

<script lang='ts' setup>
    import { reactive, ref } from 'vue'
    import { taskMonitorPageApi } from '@/api/taskMonitor'
    import { Column } from '@/types'
    import Edit from './Edit.vue'
    import { message } from 'ant-design-vue'
    
    const tableRef = ref()

    const columns = reactive<Column[]>([
        {title : '抄表月份', dataIndex : 'f', align : 'center', inFilter : true, hideInTable : true, filter : {
            type : 'datePicker',
            options : {
                picker : 'month'
            },
        }},

        {title : '表册号', dataIndex : 'a', align : 'center'},
        {title : '表册名称', dataIndex : 'b', align : 'center', inFilter : true},
        {title : '区域名', dataIndex : 'c', align : 'center', inFilter : true, filter : {type : 'select', options : []}},
        {title : '表册类型', dataIndex : 'd', align : 'center'},
        {title : '抄表员', dataIndex : 'e', align : 'center', inFilter : true, filter : {type : 'select', options : []}},
        {title : '开始时间', dataIndex : 'f', align : 'center'},
        {title : '结束时间', dataIndex : 'g', align : 'center'},
        {title : '抄表情况', dataIndex : 'h', align : 'center'},
        {title : '完成率', dataIndex : 'i', align : 'center'},
        {title : '操作', dataIndex : 'action', align : 'center'},
    ])

    async function pageApi(params:any) {
        return taskMonitorPageApi(params)
    }

    function finishEdit() {
        tableRef.value.load()
    }

    async function deleteRecord(record:any) {
        // const rs = await deleteMeterFolderApi(12)
        // if(rs.success) {
        //     tableRef.value.load()
        //     message.success('删除成功')
        // }else {
        //     message.error(rs.msg)
        // }
    }

</script>
